<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .test {
            width: 100vw;
            height: 100vh;
            background-color: aqua;
            overflow: scroll;
            /* padding: 200px 0; */
            /* padding-bottom: 200px; */
        }
        
        .test1 {
            width: 100vw;
            /* height: 200vh; */
            /* background-color: brown; */
        }
        
        .test1 p {
            height: 50px;
            margin-bottom: 10px;
            background-color: lightgrey;
        }
        
        .test .kongbai {
            height: 50px;
            background-color: transparent;
        }
        
        .btn {
            position: fixed;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>

    <div class="btn" onclick="btnFun1()">
        scorll
    </div>

    <div class="test">

        <div class="test1">
            <p class="kongbai"></p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>123</p>
            <p>9999999999999</p>
            <p>888888888888</p>
            <p>7777777777777</p>
            <p>6666666666666</p>
            <p>5555555555555</p>
            <p>444444444444444</p>
            <p>3333333333333333</p>
            <p>2222222222222</p>
            <p>1111111111111</p>
            <p>00000000000000</p>
            <p class="kongbai"></p>
        </div>
    </div>

    <script>
        function btnFun1() {

            // const dom1 = document.querySelector('.test')

            // 滚动高度
            // let scrollTop =
            //     dom1.scrollTop || document.body.scrollTop;
            // 视窗高度
            let clientHeight =
                document.documentElement.clientHeight || document.body.clientHeight;
            // // 文档总高度
            // let scrollHeight =
            //     dom1.documentElement.scrollHeight || document.body.scrollHeight;
            // console.log(scrollHeight)

            // 需要滚动距离
            // let moveHeight = scrollHeight - clientHeight

            // window.scrollTo(0, moveHeight + 200)




            // dom1.offsetHeight

            /**
             * 父元素包裹子元素，子元素内容超出父元素需要滚动
             * 获取父元素dom，设置 scrollTop等于 offsetHeight+padding
             */


            // 父容器，视窗高度
            const dom = document.querySelector('.test')
                // 子容器，大于父容器高度
            const dom1 = document.querySelector('.test1')

            console.log(dom1.offsetHeight);
            console.log(clientHeight);

            // 设置父容器滚动
            // 这里给父容器设置padding，移动的时候老是无效，解决方法，给父容器的内容，上下加实际div元素
            dom.scrollTop = dom1.offsetHeight - clientHeight


            console.log(dom.scrollTop);


            // console.log(dom1);



        }
    </script>
</body>

</html>